<template>
    <section>
      <div class="module_top " v-if="type==1">
        <div>门禁系统</div>
  
        <!-- <div class="module_top1"></div> -->
        <!-- <div class="module_top_more">
          <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
          <span>更多</span>
        </div> -->
      </div>
      <div class="module_top" v-else-if="type==2">
        <div>安全管控</div>
        <div class="module_top1"></div>
        <!-- <div class="module_top_more">
          <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
          <span>更多</span>
        </div> -->
      </div>
      <div class="module_top" v-else-if="type==3">
        <div>停车场</div>
        <!-- <div class="module_top1"></div> -->
        <!-- <div class="module_top_more">
          <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
          <span>更多</span>
        </div> -->
      </div>
      <div class="module_top " v-else-if="type==4">
        <div>运维监测</div>
        <div class="module_top1"></div>
        <!-- <div class="module_top_more">
          <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
          <span>更多</span>
        </div> -->
      </div>
      <div class="module_top" v-else-if="type==5">
        <div>运营数据</div>
        <div class="module_top1"></div>
        <!-- <div class="module_top_more">
          <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
          <span>更多</span>
        </div> -->
      </div>
      <div class="module_top" v-else-if="type==6">
        <div>能耗监测</div>
        <!-- <div class="module_top1"></div> -->
        <!-- <div class="module_top_more">
          <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
          <span>更多</span>
        </div> -->
      </div>
      <demoZhongshanItemMod></demoZhongshanItemMod>
      <!-- 人员统计 -->
      <div v-if="type==1">
        <div class="infor_module">
          <div class="infor_module_item color13b1ba">
            <img class="zs_icon" src="../../assets/img/zs_icon2.png" alt="">
            <span class="infor_module_item_name">设备总数</span>
            <span class="colorWhite">65</span>
          </div>
          <div class="infor_module_item">
            <img class="zs_icon" src="../../assets/img/zs_icon3.png" alt="">
            <span class="infor_module_item_name">进出数</span>
            <span class="colorWhite">987</span>
          </div>
        </div>
        <!-- <div class="infor_module">
          <div class="infor_module_item">
            <img class="zs_icon" src="../../assets/img/zs_icon4.png" alt="">
            <span class="infor_module_item_name">学生数</span>
            <span class="colorWhite">278</span>
          </div>
          <div class="infor_module_item">
            <img class="zs_icon" src="../../assets/img/zs_icon5.png" alt="">
            <span class="infor_module_item_name">访客数</span>
            <span class="colorWhite">331</span>
          </div>
        </div> -->
        <div class="echarts_box_echarts">
          <div class="echarts_box1_left">
            <!-- <div class="echarts_box1_item" v-for="item in option1Color" :key="item.color">
              <span>{{item.text}}</span>
              <span class="echarts_box1_color" :style="{background:item.color}"></span>
            </div> -->
          </div>
          <!-- <div class="echarts_box echarts_box1" id="echarts1"></div> -->
        </div>
      </div>
      <!-- 安全管理 -->
      <div v-if="type==2">
        <div class="infor_module">
          <div class="infor_module_item color13b1ba">
            <img class="zs_icon" src="../../assets/img/zs_icon2.png" alt="">
            <span class="infor_module_item_name">月报警数</span>
            <span class="colorWhite">987</span>
          </div>
          <div class="infor_module_item infor_module_item2">
            <img class="zs_icon" src="../../assets/img/zs_icon1.png" alt="">
            <span class="infor_module_item_name">办公区1栋102烟感探测器发出警报...</span>
          </div>
        </div>
        <div class="echarts_box_echarts">
          <div class="echarts_box echarts_box2" id="echarts2"></div>
          <div>
            <!-- <div class="echarts_box2_item" v-for="item in option2Color" :key="item.color">
              <span class="echarts_box2_color" :style="{background:item.color}"></span>
              <span>{{item.text}}</span>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 停车场 -->
      <div v-if="type==3">
        <div class="infor_module">
          <div class="infor_module_tcc">
            <div>87</div>
            <div>空车位/个</div>
          </div>
          <div class="infor_module_tcc">
            <div>283</div>
            <div>停车数/辆</div>
          </div>
          <div class="infor_module_tcc">
            <div>370</div>
            <div>总车位/个</div>
          </div>
        </div>
        <div class="echarts_box echarts_box3" id="echarts3"></div>
      </div>
      <!-- 运维监测 -->
      <div v-if="type==4">
        <div class="echarts_box echarts_box4" id="echarts4"></div>
      </div>
      <!-- 运营数据 -->
      <div v-if="type==5">
        <div class="echarts_box echarts_box6" id="echarts5"></div>
      </div>
      <!-- 能耗监测 -->
      <div v-if="type==6">
        <div class="echarts_box echarts_box6" id="echarts6"></div>
      </div>
    </section>
  </template>
  
  <script>
    import * as echarts from 'echarts'
    import demoZhongshanItemMod from './demo_zhongshan_item_mod'
    export default {
      props: ['type'],
      data() {
        let option3Data = [
          {
            value: 49,
            itemStyle: {
              color: '#4b90ff'
            }
          },
          {
            value: 200,
            itemStyle: {
              color: '#ff9f64'
            }
          },
          {
            value: 24,
            itemStyle: {
              color: '#a85fff'
            }
          },
          {
            value: 90,
            itemStyle: {
              color: '#ffda68'
            }
          },
          {
            value: 80,
            itemStyle: {
              color: '#ffda68'
            }
          },
          {
            value: 40,
            itemStyle: {
              color: '#61ffdd'
            }
          },
          {
            value: 45,
            itemStyle: {
              color: '#ff9671'
            }
          },
        ]
        let option4Data = [240, 760, 720, 80, 790, 150, 300]
        let option5Data = [
          {
            value: 52,
            itemStyle: {
              color: '#4b90ff'
            }
          },
          {
            value: 100,
            itemStyle: {
              color: '#ff9f64'
            }
          },
          {
            value: 85,
            itemStyle: {
              color: '#a85fff'
            }
          },
          {
            value: 28,
            itemStyle: {
              color: '#ffda68'
            }
          },
          {
            value: 18,
            itemStyle: {
              color: '#ffda68'
            }
          },
          {
            value: 48,
            itemStyle: {
              color: '#61ffdd'
            }
          },
          {
            value: 89,
            itemStyle: {
              color: '#ff9671'
            }
          },
        ]
  
        return {
          option1Color: [
            {
              color: '#00ffba',
              text: '访客'
            },
            {
              color: '#02edfc',
              text: '学生'
            },
            {
              color: '#00a2ff',
              text: '员工'
            },
          ],
          option2Color: [
            {
              color: '#00ce96',
              text: '紧急求助按钮'
            },
            {
              color: '#d296ce',
              text: '烟感探测器'
            },
            {
              color: '#ff5476',
              text: '吸顶式热感探测器'
            },
            {
              color: '#4dbaff',
              text: '监控异常行为分析'
            },
          ],
          option1: {
            legend: {
              orient: 'vertical',
              left: 'left',
              top:'18%',
              itemHeight: this.transformFontSize(12),
              itemWidth: this.transformFontSize(12),
              itemGap: this.transformFontSize(12),
              textStyle: {
                color: '#fff',
                fontSize: this.transformFontSize(12),
              }
            },
            tooltip: {
              trigger: 'item'
            },
  
            series: [
              {
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['50%', '40%'],
                roseType: '',
                itemStyle: {
                  borderRadius: 0,
                },
                // textStyle: {
                //   fontSize: this.transformFontSize(12),
                //   color: '#FFF'
                // },
                label: {
                  // position: 'inner',
                  fontSize: this.transformFontSize(12),
                  color: '#FFF',
                  formatter: '{c}',
                },
                labelLine: {
                  length: '1%',
                  length2: '1%',
                  show:false,
                },
                color: ['#00ffba', '#02edfc', '#00a2ff'],
                data: [
                  { value: 368, name: '员工' },
                  { value: 278, name: '学生' },
                  { value: 331, name: '访客' },
                  // {value: 33, name: '访客'},
                  // {value: 31, name: '学生'},
                  // {value: 36, name: '员工'},
                ]
              }
            ],
            // grid: { 
            //   left: '0%',
            //   right: '1%',
            //   bottom: '0%',
            //   top: '0%',
            //   containLabel: true,
            //   show: false // 网格边框是否显示，上和右边框 
            // },
          },
          option2: {
            legend: {
              align:'left',
              orient: 'vertical',
              left: 'right',
              top:'18%',
              itemHeight: this.transformFontSize(12),
              itemWidth: this.transformFontSize(12),
              itemGap: this.transformFontSize(16),
              textStyle: {
                color: '#17F8FD',
                fontSize:this.transformFontSize(12)
              }
            },
            tooltip: {
              trigger: 'item'
            },
            color: ['#00ce96', '#ff5476', '#4dbaff', '#d296ce'],
            series: [
              {
                name: '访问来源',
                type: 'pie',
                // selectedMode: '',
                radius: ['60%', '75%'],
                center: ['30%', '55%'],
                label: {
                  // position: 'top',
                  fontSize: this.transformFontSize(12),
                  formatter: '{d}%',
                  color:'#ddd',
  
                },
                labelLine: {
                  // position:'top',
                  length: this.transformFontSize(5),
                  length2: 0,
                  show:false,
                },
                data: [
                  { value: 240, name: '紧急求助按钮', },
                  { value: 260, name: '烟感探测器' },
                  { value: 250, name: '吸顶式热感探测器' },
                  { value: 250, name: '监控异常行为分析' },
                ],
              },
  
            ],
            grid: {
              left: '0%',
              right: '0%',
              bottom: '0%',
              top: '0%',
              // containLabel: true,
              // show: false // 网格边框是否显示，上和右边框 
            },
          },
          option3: {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#fff'
                }
              },
              // formatter: function(params) {
              //   return params[0].value + "年" + params[0].data;
              // }
            },
            series: [
              {
                data: option3Data,
                type: 'bar',
                barWidth: '20px',
                // showBackground: true,
                // backgroundStyle: {
                //     color: 'rgba(180, 180, 180, 0.2)'
                // }
              },
              {
                type: 'line',
                data: option3Data,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: '#17f8fd'
                    }
                  }
                }
              }
            ],
            xAxis: {
              type: 'category',
              boundaryGap: true, // 坐标轴两边留白
              axisLabel: {
                color: '#999',
                fontSize: this.transformFontSize(12),
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'transparent',
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: '#15676a'
                }
              },
              data: ['一', '二', '三', '四', '五', '六', '七']
            },
            yAxis: [{
              name: "数量",
              nameTextStyle: {
                fontSize: this.transformFontSize(12),
                color: "#ddd"
              },
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'transparent',
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: '#ddd',
                fontSize: this.transformFontSize(12),
                formatter: '{value}'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: '#15676a'
                }
              },
            }],
            grid: {
              left: '0%',
              right: '1%',
              bottom: '0%',
              top: '20%',
              containLabel: true,
              show: false // 网格边框是否显示，上和右边框 
            },
          },
          option4: {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              },
            },
            xAxis: {
              type: 'category',
              boundaryGap: false, // 坐标轴两边留白
              axisLabel: {
                color: '#ddd',
                fontSize: this.transformFontSize(12),
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'transparent',
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: '#15676a'
                }
              },
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: [{
              name: "数量",
              nameTextStyle: {
                fontSize: this.transformFontSize(12),
                color: "#ddd"
              },
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'transparent',
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: '#ddd',
                fontSize: this.transformFontSize(12),
                formatter: '{value}'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: '#15676a'
                }
              },
            }],
            grid: {
              left: '0%',
              right: '5%',
              bottom: '0%',
              top: '20%',
              containLabel: true,
              show: false // 网格边框是否显示，上和右边框 
            },
            series: [{
              data: option4Data,
              areaStyle: {
                color: '#0e9cff',
                opacity: this.transformFontSize(0.2)
              },
              symbolSize: this.transformFontSize(8),
              type: 'line',
              color: "#0e9cff",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#00eeff'
                  }
                }
              },
              smooth: true
            }]
          },
          option5: {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                crossStyle: {
                  color: '#999'
                }
              },
            },
            series: [
              {
                data: option5Data,
                type: 'bar',
                barWidth: this.transformFontSize(12),
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(23, 248, 253, 0.2)'
                },
                itemStyle: {
                  // emphasis: {
                  //     barBorderRadius: 30
                  // },
                  normal: {
                    barBorderRadius: [10, 10, 10, 10],
                    label: {
                      show: true,//是否显示 
                      position: 'top',//显示位置 
                      textStyle: { //文字样式
                        color: '#17f8fd'
                      }
                    },
                    formatter: function (params) {//核心部分 formatter 可以为字符串也可以是回调 
                      if (params.value) {//如果当前值存在则拼接
                        return params.value + '%'
                      } else {//否则返回个空
                        return '';
                      }
                    }
                  }
                }
  
              },
            ],
            xAxis: {
              type: 'category',
              boundaryGap: true, // 坐标轴两边留白
              axisLabel: {
                color: '#ddd',
                fontSize: this.transformFontSize(12),
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'transparent',
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: '#15676a'
                }
              },
              data: ['教学办公', '图书馆', '大礼堂', '创业中心', '校医院', '商业', '宿舍']
            },
            yAxis: [{
              nameTextStyle: {
                fontSize: this.transformFontSize(12),
                color: "#ddd"
              },
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'transparent',
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: '#ddd',
                fontSize: this.transformFontSize(12),
                formatter: '{value}'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: '#15676a'
                }
              },
            }],
            grid: {
              left: '0%',
              right: '1%',
              bottom: '0%',
              top: '10%',
              containLabel: true,
              show: false // 网格边框是否显示，上和右边框 
            },
          },
          option6: {
            tooltip: {},
            legend: {
              align:'left',
              // orient: 'vertical',
              top: 'top',
              top:'0',
              itemHeight: this.transformFontSize(12),
              itemWidth: this.transformFontSize(12),
              itemGap: this.transformFontSize(16),
              textStyle: {
                color: '#fff',
                fontSize:this.transformFontSize(12)
              }
            },
            tooltip: {
              trigger: 'item'
            },
            color: ['#02edfc', '#70bdff', '#00d8b2'],
            dataset: {
              source: [
                ['product', '电量', '水量', '气量'],
                ['第一季度', 190, 480, 330],
                ['第二季度', 150, 190, 195],
                ['第三季度', 480, 210, 230],
                ['第四季度', 482, 220, 220]
              ]
            },
            xAxis: {
              type: 'category',
              boundaryGap: true, // 坐标轴两边留白
              axisLabel: {
                color: '#ddd',
                fontSize: this.transformFontSize(12),
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'transparent',
                }
              },
            },
            yAxis: {
              axisLabel: {
                color: '#ddd',
                fontSize: this.transformFontSize(12),
                formatter: '{value}'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: '#15676a'
                }
              },
            },
            // [{
            //   // name: "数量",
            //   // nameTextStyle: {
            //   //   fontSize: 12,
            //   //   color: "#ddd"
            //   // },
            //   type: 'value',
            //   axisLine: {
            //     show: true,
            //     lineStyle: {
            //       color: 'transparent',
            //     }
            //   },
            //   axisTick: {
            //     show: false,
            //   },
            //   axisLabel: {
            //     color: '#15676a',
            //     fontSize: 12,
            //     formatter: '{value}'
            //   },
            //   splitLine: {
            //     show: true,
            //     lineStyle: {
            //       type: "dashed",
            //       color: '#15676a'
            //     }
            //   },
            // }],
            series: [
              {
                type: 'bar',
                barWidth: this.transformFontSize(12),
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 10, 10],
                    // color: ['#02edfc']
                  }
                }
  
              },
              {
                type: 'bar',
                barWidth: this.transformFontSize(12),
                itemStyle: {
                  normal: {
                    barBorderRadius: [5, 5, 5, 5],
                    // color: ['#0074d7']
                  }
                }
  
              },
              {
                type: 'bar',
                barWidth: this.transformFontSize(12),
                itemStyle: {
                  normal: {
                    barBorderRadius: [5, 5, 5, 5],
                    // color: ['#00d8b2']
                  }
                }
  
              },
            ],
            grid: {
              left: '0%',
              right: '1%',
              bottom: '0',
              top: '10%',
              containLabel: true,
              show: false // 网格边框是否显示，上和右边框 
            },
          }
  ,
          myChart:null,
        }
      },
      methods: {
      //   screenAdatper() {
      //   this.myChart && this.myChart.resize()
      // },
        transformFontSize(fontsize) {
          // 获取屏幕宽度
        const width = window.screen.width
        // console.log(width,"屏幕宽度");
        const ratio = width / 1920
        // console.log(ratio,"屏幕比率");
        // 取下整
        return parseInt(fontsize * ratio)
      },
        drawEcharts1() {
          // let myChart = echarts.init(document.getElementById('echarts1'))
          // myChart.setOption(this.option1);
        },
        drawEcharts2() {
          let myChart = echarts.init(document.getElementById('echarts2'))
          myChart.setOption(this.option2);
        },
        drawEcharts3() {
          let myChart = echarts.init(document.getElementById('echarts3'))
          myChart.setOption(this.option3);
        },
        drawEcharts4() {
          let myChart = echarts.init(document.getElementById('echarts4'))
          myChart.setOption(this.option4);
        },
        drawEcharts5() {
          let myChart = echarts.init(document.getElementById('echarts5'))
          myChart.setOption(this.option5);
        },
        drawEcharts6() {
          let myChart = echarts.init(document.getElementById('echarts6'))
          myChart.setOption(this.option6);
        },
        init() {
          // this.drawEcharts1()
          // this.drawEcharts2()
          this.drawEcharts3()
          // this.drawEcharts4()
          // this.drawEcharts5()
          this.drawEcharts6()
        }
      },
      beforeDestoryed() {
      // 组件销毁前移除监听,防止内存泄露
      window.removeEventListener('resize')
    },
      mounted() {
        // 监听屏幕大小变化
      // window.addEventListener('resize', this.screenAdatper);
        this.$nextTick(() => {
          this.init()
        })
  
      },
      components: {
        demoZhongshanItemMod
      }
    }
  </script>
  
  <style scoped>
    .echarts_box1_left {
      /* text-align: right;
      margin-top: 20px;
      margin-left: 54px; */
    }
  
    .echarts_box1_item {
      color: #fff;
      margin-top: 20px;
    }
  
    .echarts_box2_item {
      margin-top: 20px;
    }
  
    .echarts_box1_item:first-child {
      margin-top: 10px;
    }
  
    .echarts_box2_item:first-child {
      margin-top: 10px;
    }
  
    .echarts_box_echarts {
      display: flex;
    }
  
    .echarts_box1_color {
      width: 10px;
      height: 10px;
      display: inline-block;
      margin-left: 6px;
    }
  
    .echarts_box2_color {
      width: 10px;
      height: 10px;
      display: inline-block;
      margin-right: 6px;
    }
  
    .echarts_box {
      width: 100%;
      height: 160px;
    }
  
    .echarts_box1 {
      width: 100%;
      height: 162px;
      /* margin-left: 28px; */
    }
  
    .echarts_box3 {
      height: 222px;
    }
  
    .echarts_box2 {
      width: 100%;
      height: 150px;
      /* margin-right: 28px; */
    }
    .echarts_box4 {
      width: 100%;
      height: 180px;
      /* margin-right: 28px; */
    }
  
    .echarts_box6 {
      width: 100%;
      height: 200px;
    }
  
    .infor_module_tcc {
      text-align: center;
      color: #17f8fd;
      font-size: 12px;
    }
  
    .infor_module_tcc div:first-child {
      font-size: 20px;
      line-height: 100%;
    }
  
    .zs_icon {
      width: 15px;
    }
  
    .infor_module {
      display: flex;
      justify-content: space-between;
    }
  
    .infor_module {
      margin-bottom: 5px;
    }
  
    .infor_module_item {
      height: 30px;
      width: 120px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      color: #17f8fd;
      font-size: 12px;
      box-sizing: border-box;
      padding: 0px 8px 0 8px;
      /* padding-top:7px; */
      background: rgba(23, 248, 253, 0.2);
    }
  
    .infor_module_item2 {
      width: 236px;
    }
  
    .infor_module_item_name {
      margin-left: 5px;
      margin-right: 8px;
    }
  
    .colorWhite {
      color: #fff;
    }
  
    .module_top {
      font-size: 14px;
      font-weight: 600;
      font-style: italic;
      color: #17f8fd;
      height: 55px;
      display: flex;
      align-items: center;
      margin-top: 5px;
    }
  
    .module_top1 {
      height: 55px;
      background: url("../../assets/img/newimg/tubiao.png") no-repeat;
      background-size: 80% auto;
      width: 380px;
      position: absolute;
      margin-top: 4px;
    }
  
    .module_top_more {
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      cursor: pointer;
      line-height: 100%;
      color: #00f9ff;
    }
  
    .demo_more_img {
      height: 10px;
      font-size: 14px;
      margin-left: 5px;
    }
  
    .color13b1ba {
      background: #13b1ba;
      color: #fff;
    }
  </style>